<template>
  <div class="about">
    <div class="about-banner banner">
      <h1 class="banner-title">关于我们</h1>
    </div>
    <!--中间内容-->
    <div  class="m-container m-about">
      <div class="ui container">

        <div class="ui stackable grid">
          <div class="eleven wide column">
            <div class="ui segment">
               <div class="bj">
  <img src="https://r.photo.store.qq.com/psc?/V53KcXfb1umonn4HbITu3rINxs43TczD/45NBuzDIW489QBoVep5mcfxg*eg*DXzoyOPhCpNztcV.tAoNBGCwJdscuLYHn.dx.QVN*WtkVI7knp4ePAHSRYcu.AVwRPBfYamcV8lPF90!/r" alt="" class="pig" style="width: 654px; height:435px ; margin:0 12px 80px 200px ; border:10px white solid ;border-radius: 10px 10px 10px 10px;" >
               </div> 
            </div>
          </div>
          <div class="five wide column">
            <div class="ui top attached segment my-shadow">
              <div class="ui header">关于我们</div>
            </div>
            <div class="ui attached">
              <div class="wenzi">
              <p class="m-text">一个普通的在校生，对新奇的技术有着求知的欲望，但愿能与各位共同进步</p>
              <p class="m-text">热爱编程，喜欢仰望星空，希望此站能够记录我的学习心得</p>
              </div>
            </div>
            <div class="ui attached segment my-shadow">
            <div class="dorange">
              <div class="orange">编程</div>
              <div class="orange">写作</div>
              <div class="orange">思考</div>
              <div class="orange">运动</div>
              </div>
            </div>
            <div class="ui attached segment my-shadow">
                <div class="yy">
              <div class="java">Java</div>
              <div class="JavaScript">JavaScript</div>
              <div class="Node">Node</div>
              <div class="ElasticSearch">ElasticSearch</div>
              <div class="Deeplearning4j">Deeplearning4j</div>
              <div class="MYSQL">MYSQL</div>
              <div class="juhao">...</div>
              </div>
            </div>
            <div class="ui bottom attached segment my-shadow">
              <a class="ui github circular icon button" data-content="https://gitee.com/fang-jiale" data-position="bottom center"><i class="github icon"></i></a>
              <a class="ui wechat circular icon button"><i class="weixin icon"></i></a>
              <a class="ui qq circular icon button" data-content="1626680964" data-position="bottom center"><i class="qq icon"></i></a>
            </div>

             <!-- <div class="ui wechat-qr flowing popup transition hidden">
              <img src="https://r.photo.store.qq.com/psc?/V53KcXfb1umonn4HbITu3rINxs43TczD/45NBuzDIW489QBoVep5mcaapv*CZPLor9HYeVrOOiVLnyRm8OUpwb6xeJ6lITPL.CQBAMN*ufWnqF4BJBqO4o0iDboC.V.GwA1i2AehYs7g!/r" alt="" class="ui rounded image" style="width: 110px ">
            </div>  -->
          </div>
        </div>

      </div>
    </div>

    <div id="toolbar" class="m-padded m-fixed m-right-bottom" style="display: none">
      <div class="ui vertical icon buttons ">
        <button type="button" class="ui toc my-blue button" >目录</button>
        <a href="#comment-container" class="ui my-blue button" >留言</a>
        <button class="ui wechat icon button"><i class="weixin icon"></i></button>
        <div id="toTop-button" class="ui icon button" ><i class="chevron up icon"></i></div>
      </div>
    </div>

    <div class="ui toc-container flowing popup transition hidden" style="width: 250px!important;">
      <ol class="js-toc">

      </ol>
    </div>

    <div id="qrcode" class="ui wechat-qr flowing popup transition hidden " style="width: 130px !important;">
      <!-- <img src="./static/images/wechat.jpg" alt="" class="ui rounded image" style="width: 120px !important;"> -->
    </div>
    <br>
    <br>
  </div>

</template>
<script>

export default {
  data () {
    return {
      user: {},
      nickname: '',
      // 被激活的链接地址
      avatar: ''
    }
  },
  created () {
    this.getUser()
  },
  methods: {
    getUser () {
      this.user = window.sessionStorage.getItem('user')
      if (this.user != null) {
        this.nickname = JSON.parse(this.user).nickname
        this.avatar = JSON.parse(this.user).avatar
      }
    },
    logout () {
      window.sessionStorage.clear()
      this.$router.push('/home')
      // 刷新页面，删除vuex数据
      window.location.reload()
    }
  },

}
</script>

<style scoped>
.m-container{
  background: url('../../assets/images/bg.png') repeat;
  height: 800px;
}
 .about-banner {
   height: 550px;
   background: url(https://r.photo.store.qq.com/psc?/V53KcXfb1umonn4HbITu3rINxs43TczD/45NBuzDIW489QBoVep5mcQz6a6RmGKe6G3ZOYoIoQdl9VNaSpHgiv8JNMAcpsS2xpNxouAuqFxY8uNvPxZ3qr6E798TSOFY*de6Bx*vCMlY!/r) center
   center / cover no-repeat;
   background-color: #49b1f5;}
 .container{
   animation: main 1.0s;
 }
 .m-about {
   padding-top: 100px !important;
   padding-bottom: 0 !important;
 }
 .banner-title{
     padding-left: 600px;
     text-align: center;
     color: #f3f3f3;
     line-height: 550px;
 }
.segment{
     float: left;
 }
  .pig{
    box-shadow: 0 4px 12px 12px  rgba(7, 17, 27, 0.15);
 }
 .pig:hover{
       -webkit-box-shadow: #ccc 0px 40px 40px;
    -moz-box-shadow: #ccc 0px 40px 40px;
    box-shadow: 0 4px 12px 12px #c3c3c3
 }
 
 .header{
     border-radius: 10px 10px 10px 10px;
     clear: both;
     margin-left: 10px;
     width: 298px; height: 50px;
     float: left;
     font-size: 20px;
     padding:10px 0 0 10px ;
     margin-right: 524px;
     border:1px #ccc solid;
      background-color: white;
 }
 .header:hover{
      -webkit-box-shadow: #ccc 0px 40px 40px;
    -moz-box-shadow: #ccc 0px 40px 40px;
    box-shadow: 0 4px 12px 12px#c3c3c3 
 }
 .header{
      -webkit-box-shadow: #ccc 0px 40px 40px;
    -moz-box-shadow: #ccc 0px 40px 40px;
    box-shadow: 0 4px 12px 12px rgba(7, 17, 27, 0.15); 
 }
 .wenzi{
    float: left;
    border-radius: 10px 10px 10px 10px;
    background-color: white;
     width: 298px; height: 170px;
     margin-left: 10px;
     color: #ccc;
      border:1px #ccc solid;
      padding:10px 0 0 10px ;
      margin-right: 524px;
 }
 .wenzi:hover{
   -webkit-box-shadow: #ccc 0px 40px 40px;
    -moz-box-shadow: #ccc 0px 40px 40px;
    box-shadow: 0 4px 12px 12px #c3c3c3 ;
 }
  .wenzi{
   -webkit-box-shadow: #ccc 0px 40px 40px;
    -moz-box-shadow: #ccc 0px 40px 40px;
    box-shadow: 0 4px 12px 12px rgba(7, 17, 27, 0.15); 
 }
 .m-text{
     margin-top: 20px;
 }
 .orange{
     float: left;
     border-radius: 90px 90px 90px 90px;
    border:1px orange solid;
    width: 70px; height: 70px;
     color: orange;
     padding: 20px 18px 18px 18px;
     margin-left:4px ;
 }
 .dorange{
      background-color: white;
      width: 298px; height: 70px;
      border-radius: 10px 10px 10px 10px;
       border:1px #ccc solid;
      margin-left: 10px;
       margin-right: 524px;
 }
 .dorange:hover{
       -webkit-box-shadow: #ccc 0px 40px 40px;
    -moz-box-shadow: #ccc 0px 40px 40px;
    box-shadow: 0 4px 12px 12px #c3c3c3 ;
 }
  .dorange{
       -webkit-box-shadow: #ccc 0px 40px 40px;
    -moz-box-shadow: #ccc 0px 40px 40px;
    box-shadow: 0 4px 12px 12px rgba(7, 17, 27, 0.15); 
 }
 .java{
     border-radius: 5px 5px 5px 5px;
     border:1px silver solid;
      width: 50px; height: 30px;
     color: #49b1f5;
     padding:4px 0 0 4px ;
     float: left;
     margin: 5px 0px 0px 10px;
 }
 .JavaScript{
     float: left;
      border-radius: 5px 5px 5px 5px;
     border:1px silver solid;
      width: 100px; height: 30px;
     color: #49b1f5;
     padding:4px 0 0 10px ;
      margin: 5px 0px 0px 2px;
 }
 .Node{
      float: left;
      border-radius: 5px 5px 5px 5px;
     border:1px silver solid;
      width: 50px; height: 30px;
     color: #49b1f5;
     padding:4px 0 0 4px ;
      margin:5px 0px 5px 2px;
 }
 .ElasticSearch{
    clear: both;
     float: left;
      border-radius: 5px 5px 5px 5px;
     border:1px silver solid;
      width: 110px; height: 30px;
     color: #49b1f5;
     padding:4px 0 0 4px ;
      margin:5px 0px 0px 10px;
 }
 .Deeplearning4j{
    float: left;
      border-radius: 5px 5px 5px 5px;
     border:1px silver solid;
      width: 130px; height: 30px;
     color: #49b1f5;
     padding:4px 0 0 4px ;
      margin:5px 0px 0px 10px;
 }
 .MYSQL{
      clear: both;
     float: left;
      border-radius: 5px 5px 5px 5px;
     border:1px silver solid;
      width: 70px; height: 30px;
     color: #49b1f5;
     padding:4px 0 0 4px ;
      margin:5px 0px 0px 10px;
 }
 .juhao{
     float: left;
      border-radius: 5px 5px 5px 5px;
     border:1px silver solid;
      width: 50px; height: 30px;
     color: #49b1f5;
     padding:4px 0 0 16px ;
      margin:5px 0px 0px 10px;
 }
 .yy{
    background-color: white;
      width: 298px; height: 135px;
      border-radius: 10px 10px 10px 10px;
       border:1px #ccc solid;
      margin-left: 10px;
       margin-right: 524px;
 }
  .yy{
      -webkit-box-shadow: #ccc 0px 40px 40px;
    -moz-box-shadow: #ccc 0px 40px 40px;
    box-shadow: 0 4px 12px 12px rgba(7, 17, 27, 0.15);  
 }
 .yy:hover{
      -webkit-box-shadow: #ccc 0px 40px 40px;
    -moz-box-shadow: #ccc 0px 40px 40px;
    box-shadow: 0 4px 12px 12px #c3c3c3;  
 }

</style>